// 直播
import React, { PureComponent } from 'react';
import videojs from 'video.js';
// 引入折叠面板框架
import { Button, message } from 'antd';
// 引入视频框架的专属样式
import 'video.js/dist/video-js.css';
import './play.scss';

export default class TVlive extends PureComponent {
  constructor(props) {
    super(props);
    this.player = null;
    this.state = {
      fanList: [],
      index: 0,
    };
  }
  componentWillUnmount() {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  componentDidMount() {
    let { fanList, fanName } = this.props.location.state;
    // 集数赋值给数组
    this.setState(
      {
        fanList: JSON.parse(fanList),
      },
      () => {
        // 番剧Url
        let fanUrl = JSON.parse(fanList)[0].fanUrl;
        document.title = `在线播放：${fanName} 第1集`;
        this.player = videojs('video');
        this.player.controls(true);
        this.player.src(fanUrl);
        // 视频准备完成直接播放
        this.player.load(
          this.player.play().catch(() => {
            message.info({ content: '网络差，无法播放', className: 'bulletChatMessage' });
          })
        );
      }
    );
  }
  // 按钮的事件
  BtnUrl = (list, index) => {
    this.setState({
      index,
    });
    // 番剧名称
    let title = this.props.location.state.fanName;
    // 番剧集数
    let fanColl = list.fanColl;
    // 番剧Url
    let fanUrl = list.fanUrl;
    document.title = `在线播放：${title} ${fanColl}`;
    this.player = videojs('video');
    this.player.controls(true);
    this.player.src(fanUrl);
    this.player.load(
      this.player.play().catch(() => {
        message.info({ content: '网络差，无法播放', className: 'bulletChatMessage' });
      })
    );
  };
  // 倒叙
  removeBtn = () => {
    let { index } = this.state;
    let fan = this.props.location.state.fanList;
    this.setState({
      index: JSON.parse(fan).length - 1 - index,
      fanList: JSON.parse(fan).reverse(),
    });
  };
  // 顺序
  cloneBtn = () => {
    let { index } = this.state;
    let fan = this.props.location.state.fanList;
    this.setState({
      index: JSON.parse(fan).length - 1 - index,
      fanList: JSON.parse(this.props.location.state.fanList),
    });
  };
  // 设置class样式
  setClass = (int) => {
    let { index } = this.state;
    if (int === index) {
      return 'fanPlay_body_button border';
    }
    return 'fanPlay_body_button';
  };
  render() {
    let state = this.props.location.state;
    let { fanList } = this.state;
    return (
      <div className="fanPlay">
        <video id="video" className="video-js vjs-default-skin video"></video>
        <div className="fanPlay_title">
          <div className="fanPlay_title_name">{state.fanName}</div>
          <Button className="fanPlay_title_remove" type="text" onClick={this.removeBtn}>
            倒叙↓
          </Button>
          <Button className="fanPlay_title_clone" type="text" onClick={this.cloneBtn}>
            顺序↑
          </Button>
        </div>
        {/* 集数按钮 */}
        <div className="fanPlay_body">
          {fanList.length !== 0
            ? fanList.map((list, index) => {
                return (
                  <Button
                    onClick={() => this.BtnUrl(list, index)}
                    key={index}
                    type="text"
                    className={this.setClass(index)}>
                    {list.fanColl}
                  </Button>
                );
              })
            : ''}
        </div>
        {/* 底部警告 */}
        <div className="fanPlay_botton">
          <p>番剧内容收集自互联网</p>
          <p>直播无法播放请刷新网页</p>
          <p>用户恶意使用所产生的纠纷和本网站无关</p>
        </div>
      </div>
    );
  }
}
